<template>
  <div>
    <div class="title-style">基本信息</div>
    <Form :disabled="userInfo.operation === '2'" ref="formItem" :model="formItem" label-position="right" :rules="ruleValidate" :label-width="100">
      <Row :gutter="24">
        <Col span="8">
          <FormItem label="申请救助项目" prop="DF000">
            <Select disabled v-model="formItem.DF000" clearable filterable>
              <Option value="6">临时救助</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="所在省" prop="DF001">
            <Select disabled v-model="formItem.DF001" clearable filterable>
              <Option v-for="item in areaInfo.provinceList" v-bind:key="item.DF001" :value="item.DF001">{{item.DF003}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="所在市" prop="DF002">
            <Select disabled v-model="formItem.DF002" clearable filterable>
              <Option v-for="item in areaInfo.cityList" v-bind:key="item.DF001" :value="item.DF001">{{item.DF003}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="所在区县" prop="DF003">
            <Select v-model="formItem.DF003" clearable filterable @on-change="getCity(formItem.DF003,3)">
              <Option v-for="item in areaInfo.countyList" v-bind:key="item.DF001" :value="item.DF001">{{item.DF003}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="所在街道/乡镇" prop="DF004">
            <Select v-model="formItem.DF004" clearable filterable @on-change="getCity(formItem.DF004,4)">
              <Option v-for="item in areaInfo.streetList" v-bind:key="item.DF001" :value="item.DF001">{{item.DF003}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="所在社区/村" prop="DF005">
            <Select v-model="formItem.DF005" clearable filterable>
              <Option v-for="item in areaInfo.communityList" v-bind:key="item.DF001" :value="item.DF001">{{item.DF003}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="16">
          <FormItem label="户籍地址" prop="DF006">
            <Input v-model="formItem.DF006"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="手机号" prop="DF007">
            <Input v-model="formItem.DF007"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="临时救助原因" prop="DF008">
            <Select v-model="formItem.DF008" clearable filterable>
              <Option v-for="item in lishijiuzhuyuanyin" v-bind:key="item.id" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="对象类型" prop="DF009">
            <Select v-model="formItem.DF009" clearable filterable>
              <Option v-for="item in jiuzhuduixiangleixing" v-bind:key="item.id" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="申请救助项目" prop="DF010">
            <Select v-model="formItem.DF010" clearable filterable>
              <Option v-for="item in jiuzhuxiangmu" v-bind:key="item.id" :value="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="申请原因" prop="DF011">
            <Input v-model="formItem.DF011"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="申请时间" prop="DF012">
            <DatePicker v-model="formItem.DF012" type="date" style="width: 100%"></DatePicker>
          </FormItem>
        </Col>
      </Row>
      <div class="title-style">家庭信息</div>
      <family :paramsData="userInfo" ref="family"></family>
      <div class="title-style">赡抚养信息</div>
      <fuyang ref="fuyang" :paramsData="userInfo"></fuyang>
      <div class="title-style">附件</div>

    </Form>
    <jiuzhuImg  :paramsData="userInfo" ref="jiuzhuImg"></jiuzhuImg>
    <Button v-if="code === ''" style="margin-right: 10px" size="large" type="success" @click="addok('formItem')">保存</Button>
    <Button v-if="code !== '' && this.$route.params.operation !== '2'" style="margin-right: 10px" size="large" type="info" @click="updateInfo('formItem')">保存</Button>
    <Button v-if="code !== '' && this.$route.params.operation === '2'" style="margin-right: 10px" size="large" type="info" @click="back('formItem')">返回</Button>
  </div>
</template>
<script>
import { getCityInfo, date2str, userinfo, updateOrder, createOrder } from '@/api/eventlist'
import jiuzhuxiangmu from './data/jiuzhuxiangmu.json'
import lishijiuzhuyuanyin from './data/lishijiuzhuyuanyin.json'
import jiuzhuduixiangleixing from './data/jiuzhuduixiangleixing.json'
import gongyangjigou from './data/gongyangjigou.json'
import family from './components/Jfamily'
import fuyang from './components/Tfuyang'
import jiuzhuImg from './components/jiuzhuImg'
export default {
  components: { family, fuyang, jiuzhuImg },
  data () {
    return {
      jiuzhuxiangmu: jiuzhuxiangmu,
      jiuzhuduixiangleixing: jiuzhuduixiangleixing,
      gongyangjigou: gongyangjigou,
      lishijiuzhuyuanyin: lishijiuzhuyuanyin,
      code: '',
      areaInfo: { provinceList: [], cityList: [], countyList: [], streetList: [], communityList: [] },
      userInfo: {},
      formItem: {
        DF000: '6'
      },
      ruleValidate: {
        DF000: [ { required: true, message: '请选择申请救助项目', trigger: 'blur' } ],
        DF003: [ { required: true, message: '请选择区县', trigger: 'blur' } ],
        DF004: [ { required: true, message: '请选择乡镇/街道', trigger: 'blur' } ],
        DF005: [ { required: true, message: '请选择社区/村', trigger: 'blur' } ],
        DF006: [ { required: true, message: '请输入户籍地址', trigger: 'blur' } ],
        DF007: [ { required: true, message: '请输入手机号', trigger: 'blur' } ],
        DF008: [ { required: true, message: '请选择临时救助原因', trigger: 'blur', type: 'number' } ],
        DF009: [ { required: true, message: '请选择对象类型', trigger: 'blur', type: 'number' } ],
        DF010: [ { required: true, message: '请选择申请救助项目', trigger: 'blur', type: 'number' } ],
        DF011: [ { required: true, message: '请选择申请原因', trigger: 'blur' } ],
        DF012: [ { required: true, message: '请选择申请时间', trigger: 'blur', type: 'date' } ]
      }
    }
  },
  methods: {
    addok (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formItem.DF012 = date2str(this.formItem.DF012)
          let data = {
            item_id: '11210101000000MZJD5212000186000',
            cardno: this.userInfo.cardno,
            name: this.userInfo.name,
            mobile: this.userInfo.mobile
          }
          let form_params = {
            formItem: this.formItem,
            familyList: this.$refs.family.familyList,
            fuyangList: this.$refs.fuyang.fuyangList,
            param: this.$refs.jiuzhuImg.params
          }
          createOrder(data).then(res => {
            if (res.data.errcode === 0) {
              data.code = res.data.data
              this.updateOk(data, form_params)
            } else { //
              this.$Notice.error({
                title: '订单创建失败',
                desc: res.data.errmsg
              })
            }
          })
        } else {
          this.$Notice.error({ title: '将基本信息填写完整', desc: '' })
        }
      })
    },
    updateInfo (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log('这是真的')
          this.formItem.DF012 = date2str(this.formItem.DF012)
          let data = {
            item_id: '11210101000000MZJD5212000186000',
            cardno: this.userInfo.cardno,
            name: this.userInfo.name,
            mobile: this.userInfo.mobile,
            code: this.code
          }
          let form_params = {
            formItem: this.formItem,
            familyList: this.$refs.family.familyList,
            fuyangList: this.$refs.fuyang.fuyangList,
            param: this.$refs.jiuzhuImg.params
          }
          this.updateOk(data, form_params)
        } else {
          this.$Notice.error({ title: '将基本信息填写完整', desc: '' })
        }
      })
    },
    updateOk (data, form_params) {
      console.log(this.$refs.family.familyList)
      data.form_params = form_params
      updateOrder(data).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('订单保存成功!')
          this.$router.push({
            name: 'workbench',
            params: {
            }
          })
        } else {
          this.$Notice.error({
            title: '操作失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    back () {
      this.$router.push({
        name: 'workbench',
        params: {
        }
      })
    },
    getCity (id, level) {
      getCityInfo({ fid: id }).then(res => {
        if (res.data.errcode === 0) {
          let dataList = res.data.data.dataList
          // console.log(dataList, level)
          if (level === 0) {
            this.areaInfo.provinceList = dataList
            this.formItem.DF001 = dataList[0].DF001
            this.getCity(this.formItem.DF001, 1)
          } else if (level === 1) {
            this.areaInfo.cityList = dataList
            this.formItem.DF002 = this.areaInfo.cityList[0].DF001
            this.getCity(this.formItem.DF002, 2)
          } else if (level === 2) {
            this.areaInfo.countyList = dataList
          } else if (level === 3) {
            this.areaInfo.streetList = dataList
          } else if (level === 4) {
            this.areaInfo.communityList = dataList
          }
        } else {
          this.$Notice.error({ title: '获取区县信息失败', desc: res.data.errmsg })
        }
      })
    },
    getUser (item) {
      userinfo(item.cardno).then(res => {
        if (res.data.errcode === 0) {
          console.log(res.data.data)
          this.userInfo.mobile = res.data.data.mobile
        }
      })
    }
  },
  mounted () {
    this.getCity('0', 0)
    if (this.$route.params.code) {
      this.userInfo = {
        cardno: this.$route.params.cardno,
        operation: this.$route.params.operation,
        code: this.$route.params.code,
        paramData: this.$route.params.paramData
      }
      this.code = this.userInfo.code
      console.log(this.$route.params.paramData, '????????????')
      let paramData = this.$route.params.paramData
      this.formItem = paramData.formItem
      this.getCity(this.formItem.DF003, 3)
      this.getCity(this.formItem.DF004, 4)
    } else {
      this.userInfo = {
        cardno: this.$route.params.cardno,
        name: this.$route.params.name,
        operation: this.$route.params.operation
      }
    }
    this.getUser(this.userInfo)
  }
}
</script>
<style>
.title-style {
  padding: 8px 12px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 15px 0;
  font-size: 16px;
  width: 100%;
}
</style>
